<!-- 加载第三方插件 -->
<!-- <link rel="stylesheet" href="/static/ztree/demo.css" type="text/css"> -->
<link rel="stylesheet" href="/static/ztree/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="/static/ztree/jquery.ztree.all.min.js"></script>
<style type="text/css">
	.border{
		border: 1px solid #ccc ;
		margin: 0 10px;
	}
	.min-height{
		min-height:300px;
	}
</style>
<!-- 页面容器 -->
<div class="panel panel-default">
	<div class="panel-heading">
		<button type="button" class="btn btn-primary" onclick="showMenuAdd();">添加一级菜单</button>
	</div>
	<div class="panel-body">
		<div class="row">
			<div class="col-sm-4 border min-height">
				<ul id="menuTree" class="ztree"></ul>	
			</div>
			<div class="col-sm-7">
				<form action="" method="POST" class="form-horizontal " id="formMenu" style="display: none;">
					<div class="form-group">
						<label for="input-id" class="col-sm-3 control-label">菜单名称:</label>	
						<div class="col-sm-6">
							<input type="text" name="menu_name"  id="menu_name" class="form-control ">
						</div>
					</div>	
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">菜单URL:</label>
						<div class="col-sm-6">
							<input type="text" name="menu_url"  id="menu_url" class="form-control"  placeholder="菜单URL">
						</div>
					</div>
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">目标名称:</label>
						<div class="col-sm-6">
							<input type="text" name="target_name"  id="target_name" class="form-control" placeholder="目标名称">
						</div>
					</div>
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">图标:</label>
						<div class="col-sm-6">
							<input type="text" name="menu_icon" id="menu_icon"  class="form-control" placeholder="图标">
						</div>
					</div>
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">排序:</label>
						<div class="col-sm-6">
							<input type="text"  name="sort" id="sort" class="form-control" value="10">
						</div>
					</div>
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">备注:</label>
						<div class="col-sm-6">
							<input type="text" name="remark" id="remark"  class="form-control" placeholder="备注">
						</div>
					</div>
					<hr>
					<div class="form-group">
						<div class="col-sm-3"></div>
						<div class="col-sm-9">
							<button type="button" class="btn btn-default" onclick="addMenuFunc();" id="addMenuId">添加菜单</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- 弹出层 -->
<div class="modal fade" id="addMenu">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" onclick="hideMenuAdd();">&times;</button>
				<h4 class="modal-title">添加一级菜单</h4>
			</div>
			<div class="modal-body">
				<form action="" method="POST" class="form-horizontal" >
					<div class="form-group">
						<label for="input-id" class="col-sm-3 control-label">菜单名称:</label>	
						<div class="col-sm-6">
							<input type="text" name="menu_name" id="f_menu_name"  class="form-control " placeholder="菜单名称">
						</div>
					</div>	
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">菜单URL:</label>
						<div class="col-sm-6">
							<input type="text" name="menu_url" id="f_menu_url"  class="form-control"  placeholder="菜单URL">
						</div>
					</div>
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">目标名称:</label>
						<div class="col-sm-6">
							<input type="text" name="target_name" id="f_target_name"  class="form-control" placeholder="目标名称">
						</div>
					</div>
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">图标:</label>
						<div class="col-sm-6">
							<input type="text" name="menu_icon" id="f_menu_icon"  class="form-control" placeholder="图标">
						</div>
					</div>
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">排序:</label>
						<div class="col-sm-6">
							<input type="text"  name="sort" id="f_sort" class="form-control" value="10">
						</div>
					</div>
					<div class="form-group">
						<label for="menuUrl" class="col-sm-3 control-label">备注:</label>
						<div class="col-sm-6">
							<input type="text" name="remark" id="f_remark"  class="form-control" placeholder="备注">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer ">
				<button type="button" class="btn btn-default" onclick="hideMenuAdd();">取消</button>
				<button type="button" class="btn btn-primary"onclick="saveMenu();">添加菜单</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">


// 弹窗start 
// 显示添加一级菜单窗口
function showMenuAdd(){
	$('#addMenu').modal('show');

}
// 隐藏一级菜单窗口
function hideMenuAdd(){
	$('#addMenu').modal('hide');
}
// 添加菜单
function saveMenu(){
    var name   = $('#f_menu_name').val();
    var menu_url    = $('#f_menu_url').val();
    var target_name = $('#f_target_name').val();
    var menu_icon = $('#f_menu_icon').val();
    var sort = $('#f_sort').val();
    var remark = $('#f_remark').val();
    if ($.trim(name).length == 0) {
        alert('菜单名称不能为空！')
        return;
    }
    var saveData='parent_id=0' + '&menu_name=' + name + '&menu_url=' + menu_url + '&target_name=' + target_name + '&menu_icon=' + menu_icon + '&sort=' + sort + '&remark=' + remark;
    // 添加
    $.ajax({
        type:'post',
        url:'{:url("menu/save")}',
        data:saveData,
        dataType:'json',
        success:function(id){
				alert('添加成功');
				window.location.reload();
        }
    })
}
// 弹窗end




// ztree配置start
// 添加节点方法
function addHoverDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
    var removeStr = "<span class='button remove' id='removeBtn_" + treeNode.tId
        + "' title='删除'></span>";
    sObj.after(removeStr);
    var btn = $("#removeBtn_"+treeNode.tId);
    if (btn) btn.bind("click", function(){
    	var flag=confirm('确定删除吗');
    	if(flag){
    		// 移除方法
    		$res=removeNodeFunc(treeId,treeNode);
			console.log(7)

	        var zTree = $.fn.zTree.getZTreeObj("menuTree");
	       	zTree.removeNode(treeNode);
    	}
    	return false;
    });
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
        + "' title='添加'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+treeNode.tId);
    if (btn) btn.bind("click", function(){
        var zTree = $.fn.zTree.getZTreeObj("menuTree");
        zTree.addNodes(treeNode, { pId:treeNode.id, name:"新增item"});
        return false;
    });
};
// 移除节点显示方法
function removeHoverDom(treeId, treeNode) {
    $("#addBtn_"+treeNode.tId).unbind().remove();
    $("#removeBtn_"+treeNode.tId).unbind().remove();
};
var setting = {
    view: {
    	/*用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
请务必与 setting.view.removeHoverDom 同时使用*/
        addHoverDom: addHoverDom,//添加样式修改
        removeHoverDom: removeHoverDom,//移除节点方法
        // 设置是否允许同时选中多个节点,设置为 true时，按下 Ctrl 或 Cmd 键可以选中多个节点
        selectedMulti: false,
        // 点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。
        autoCancelSelected: false,

    },
	callback: {
		// 单击节点控制
		onClick:selectFun
	},
    // 节点不显示复选框
    check: {
        enable: false
    },
    data: {
    	// 设置节点数据格式
        simpleData: {
            enable: true,
			idKey: "id",
			pIdKey: "pId",
			rootPId: 0
        }
    },
    // 节点编辑
    edit: {
        enable: true,
        showRenameBtn : false,
        showRemoveBtn: false,
    }
};
// 初始化数据
var zNodes =[
    // { id:1, pId:0, name:"父节点1", open:true},
    // { id:12, pId:1, name:"父节点12"},
    // { id:121, pId:12, name:"叶子节点121"},
    // { id:122, pId:12, name:"叶子节点122"},
    // { id:123, pId:12, name:"叶子节点123"},
    // { id:112, pId:11, name:"叶子节点112"},
    // { id:113, pId:11, name:"叶子节点113"},
    // { id:124, pId:12, name:"叶子节点124"},
    // { id:11, pId:1, name:"父节点11"},
    // { id:111, pId:11, name:"叶子节点111"},
    // { id:114, pId:11, name:"叶子节点114"},
    // { id:13, pId:1, name:"父节点13", isParent:true},
    // { id:2, pId:0, name:"父节点2"},
    // { id:21, pId:2, name:"父节点21", open:true},
    // { id:211, pId:21, name:"叶子节点211"},
    // { id:212, pId:21, name:"叶子节点212"},
    // { id:213, pId:21, name:"叶子节点213"},
    // { id:214, pId:21, name:"叶子节点214"},
    // { id:22, pId:2, name:"父节点22"},
    // { id:221, pId:22, name:"叶子节点221"},
    // { id:222, pId:22, name:"叶子节点222"},
    // { id:223, pId:22, name:"叶子节点223"},
    // { id:224, pId:22, name:"叶子节点224"},
    // { id:23, pId:2, name:"父节点23"},
    // { id:231, pId:23, name:"叶子节点231"},
    // { id:232, pId:23, name:"叶子节点232"},
    // { id:233, pId:23, name:"叶子节点233"},
    // { id:234, pId:23, name:"叶子节点234"},
    // { id:3, pId:0, name:"父节点3", isParent:true}
];
var zNodes={$data|raw};
$(document).ready(function(){
    $.fn.zTree.init($("#menuTree"), setting, zNodes);
});
// ztree配置end




// ztree配合页面start
// 单击节点控制
function selectFun(e,treeId, treeNode){
	// alert(2)
	console.log(treeNode)
	var  $detail=$("#formMenu");
    if ($detail.attr('tid') == treeNode.tId) {return}
    if (treeNode.name) {$('#menu_name').val(treeNode.name)}else{$('#menu_name').val('')}
    if (treeNode.menu_url) {$('#menu_url').val(treeNode.menu_url)} else{$('#menu_url').val('')}
    if (treeNode.target_name) {$('#target_name').val(treeNode.target_name)} else{$('#target_name').val('')}
    if (treeNode.menu_icon) {$('#menu_icon').val(treeNode.menu_icon)} else{$('#menu_icon').val('')}
    if (treeNode.sort) {$('#sort').val(treeNode.sort)} else{$('#sort').val('')}
    if (treeNode.remark) {$('#remark').val(treeNode.remark)} else{$('#remark').val('')}
    $detail.attr('tid', treeNode.tId)
	if(typeof(treeNode.id) == "undefined"){
		$("#addMenuId").html('添加菜单')
	}else{
		$("#addMenuId").html('编辑菜单')
	}
    $detail.show();
}
// 编辑添加菜单
function addMenuFunc(){
    var zTree  = $.fn.zTree.getZTreeObj("menuTree")
    var name   = $('#menu_name').val()
    var menu_url    = $('#menu_url').val()
    var target_name = $('#target_name').val()
    var menu_icon = $('#menu_icon').val()
    var sort = $('#sort').val()
    var remark = $('#remark').val()
    
    if ($.trim(name).length == 0) {
        alert('菜单名称不能为空！')
        return;
    }
    var upNode = zTree.getSelectedNodes()[0];
    // console.log(upNode)
    if (!upNode) {
        alert('未选中任何菜单！')
        return;
    }
    if(typeof(upNode.pId) == "undefined") {
        alert('添加有误')
    	return;
    }
    // 添加权限节点
    if(typeof(upNode.id) == "undefined"){
            var saveData='parent_id=' + upNode.pId + '&menu_name=' + name + '&menu_url=' + menu_url + '&target_name=' + target_name + '&menu_icon=' + menu_icon + '&sort=' + sort + '&remark=' + remark;
            // 添加
            $.ajax({
                type:'post',
                url:'{:url("menu/save")}',
                data:saveData,
                dataType:'json',
                success:function(data){
                	if(data.id){
	                    upNode.id    = data.id;
	                    upNode.pid    = upNode.pId;
		                upNode.name   = name;
		                upNode.menu_url    = menu_url;
		                upNode.target_name = target_name;
		                upNode.menu_icon   = menu_icon;
		                upNode.sort   = sort;
		                upNode.remark = remark;
	                    zTree.updateNode(upNode);
	   					alert('添加成功');
                	}else{
                		alert('添加失败');
                	}
                }
            })
    }else{
   // 编辑权限节点
        var updateData='id=' + upNode.id + '&menu_name=' + name + '&menu_url=' + menu_url + '&target_name=' + target_name + '&menu_icon=' + menu_icon + '&sort=' + sort + '&remark=' + remark;
        var str="{:url('admin/menu/editMenuBehavior',['id'=>'id'])}";
        var url =  str.replace("id",upNode.id);
        // 修改
        $.ajax({
            type:'post',
            url,
            data:updateData,
            dataType:'json',
            success:function(data){
            	if(data.msg=='ok'){
	                upNode.name   = name;
	                upNode.menu_url    = menu_url;
	                upNode.target_name = target_name;
	                upNode.menu_icon   = menu_icon;
	                upNode.sort   = sort;
	                upNode.remark = remark;
	                zTree.updateNode(upNode);
	   				alert('修改成功');
            	}else{
            		alert('修改失败');
            	}
            }
        })
    }
}

// 移除节点
function removeNodeFunc(treeId,treeNode){
	console.log(treeNode.id)
	if(typeof(treeNode.id)=='undefined') return false;
    var str="{:url('admin/menu/delete',['id'=>'id'])}";
    var url =  str.replace("id",treeNode.id);
    if(url){
		$.ajax({
			type:'get',
			url,
			dataType:'json',
			async:false,
			success:function(msg){
			    if(data.msg=='ok'){
			        alert('删除成功');
			    }else{
			       alert('删除失败')
			    }
			},
			error:function() {
				console.log(6)
			}
		})
    }
}
// ztree配合页面end



</script>